/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="old-compare_form"
             :label-width="100">
        <sf-form-item>
            <sf-fieldlabel class="p-l0">
                <lang>灰度服务名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                ref="fieldName"
                v-model="formData.readableName"
                :default-width="defaultWidth"
                :max-length="30"
                :allow-blank="false"
                :utf8-length="false"
                vtype="name"
                :blur-trim="true"
                :placeholder="_('请输入灰度服务名称')" />
        </sf-form-item>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>服务协议</lang>
            </sf-fieldlabel>
            <sf-radio-group v-model="formData.protocol">
                <sf-radio name="protocol"
                          :check-value="1">
                    https
                </sf-radio>
                <sf-radio name="protocol"
                          :check-value="2">
                    gRPC
                </sf-radio>
            </sf-radio-group>
        </sf-form-item>
        <div class="form-box__list">
            <div class="form-box__items">
                <div class="form-box__title">
                    <img src="../../../../img/model__icon.svg"
                         class="m-r5"
                         alt="">
                    <lang>服务1</lang>
                </div>
                <div class="form-select__box">
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel class="already-leng">
                                <lang>
                                    选择服务(已正式发布)
                                </lang>
                            </sf-fieldlabel>
                            <sf-fieldtip class="already-tip">
                                <lang>仅支持选择Web Service的服务</lang>
                            </sf-fieldtip>
                        </sf-form-item>
                        <sf-select v-model="formData.id"
                                   :default-width="selectWidth"
                                   :options="modelNameList"
                                   :allow-search="true"
                                   :allow-blank="false"
                                   :placeholder="_('请选择')" />
                        <!-- :allow-blank="false" -->
                    </div>
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>对应模型</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-textfield
                            ref="fieldName"
                            v-model="defaultServiceName"
                            :default-width="selectWidth"
                            :max-length="30"
                            :default-disabled="true"
                            :allow-blank="false"
                            :utf8-length="false"
                            vtype="name"
                            :blur-trim="true"
                            :placeholder="_('对应模型')" />
                    </div>
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>流量权重（%）</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-numberfield
                            v-model="formData.subModelService.traffic"
                            :default-width="numberWidth"
                            :allow-blank="false"
                            :min-value="1"
                            :max-value="100"
                            :allow-decimals="false"
                            :placeholder="_('请输入整数数字')" />
                    </div>
                </div>
                <div class="form-box__title m-t0">
                    <img src="../../../../img/model__icon.svg"
                         class="m-r5"
                         alt="">
                    <lang>模型2</lang>
                </div>
                <div class="form-select__box">
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>选择模型</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-select v-model="formData.subModelService.modelId"
                                   :default-width="selectWidth"
                                   :allow-blank="false"
                                   :allow-search="true"
                                   :options="modelList"
                                   :placeholder="_('请选择模型')" />
                    </div>
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>服务名称</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-textfield
                            ref="fieldName"
                            v-model="formData.subModelService.subName"
                            :default-width="selectWidth"
                            :max-length="30"
                            :allow-blank="false"
                            :utf8-length="false"
                            vtype="name"
                            :blur-trim="true"
                            :placeholder="_('请输入服务名称')" />
                    </div>
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>流量权重（%）</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-numberfield
                            v-model="formData.canaryTrafficPercent"
                            :default-width="numberWidth"
                            :allow-blank="false"
                            :min-value="1"
                            :max-value="100"
                            :allow-decimals="false"
                            :placeholder="_('请输入整数数字')" />
                    </div>
                </div>
                <select-image-form
                    ref="canaryImage"
                    :width="defaultWidth"
                    :image-list="imageList" />
                <instance-number-form
                    ref="canaryInstance"
                    :width="220"
                    :submit-data="formData.canary" />
                <resource-config-form
                    ref="canaryResource"
                    :default-width="defaultWidth"
                    :submit-data="formData.canary" />
            </div>
        </div>
    </sf-form>
</template>
<script>
const DEFAULT_WIDTH = 472;
const NAME_WIDTH = 386;
const SELECT_WIDTH = 200;

const NUMBER_WIDTH = 160;
const PERCENT_TOTAL = 100;

const DEFAULT_VALUE = {
    canaryTrafficPercent:50,
    id: '',
    readableName:'',
    protocol:1,
    subModelService:{
        cpuNum:1,
        gpuNum:0,
        memorySize:1,
        minReplicas:1,
        maxReplicas:1,
        image:'',
        modelUri:'',
        modelName:'',
        traffic:50,
        subName:'',
        modelId:''
    }
};
import selectImageForm from 'src/home/mod_cluster/common/common_form/select_image_form';

import instanceNumberForm from 'src/home/mod_cluster/common/common_form/instance_number_form';
import resourceConfigForm from 'src/home/mod_cluster/common/common_form/resource_config_form';

export default {
    components:{
        selectImageForm,
        instanceNumberForm,
        resourceConfigForm
    },
    computed: {
        defaultWidth () {
            return DEFAULT_WIDTH;
        },
        nameWidth () {
            return NAME_WIDTH;
        },
        selectWidth () {
            return SELECT_WIDTH;
        },
        numberWidth () {
            return NUMBER_WIDTH;
        },
        canaryTraffic () {
            return this.formData.subModelService.traffic;
        },
        defaultTraffic () {
            return this.formData.canaryTrafficPercent;
        },
        formName () {
            return this.formData.id;
        }

    },
    data () {
        return {
            formData: { ...DEFAULT_VALUE },
            resourceNums:{
                core: 256,
                memory:256,
                cgu:256
            },
            typeList:[],
            sortType:'',
            modelNameList:[],
            modelList:[],
            imageList:[],
            defaultServiceName:'' // 默认服务名称
        };
    },
    watch: {
        canaryTraffic () {

            // 不能为负数
            if (this.canaryTraffic && this.canaryTraffic.toString().indexOf('-') < 0) {
                this.formData.canaryTrafficPercent = PERCENT_TOTAL - this.canaryTraffic;
            }
        },
        defaultTraffic () {
            if (this.defaultTraffic && this.defaultTraffic.toString().indexOf('-') < 0) {
                this.formData.subModelService.traffic = PERCENT_TOTAL - this.defaultTraffic;
            }
        },
        formName:{
            handler () {
                if (this.modelNameList.length > 0) {
                    this.defaultServiceName = this.modelNameList.filter(item => {
                        return item.value === this.formName;
                    })[0].modelName;
                }
            }
        }
    },
    mounted () {
    },
    methods: {
        getJsonValue () {
            Object.assign(this.formData.subModelService,
                this.$refs.canaryInstance.getJsonValue(),
                this.$refs.canaryImage.getJsonValue(),
                this.$refs.canaryResource.getJsonValue());
            let defaultModelID = this.formData.subModelService.modelId;
            this.formData.subModelService.modelUri = this.modelList.filter(item => item.value === defaultModelID)[0].s3Address;
            this.formData.subModelService.modelName = this.modelList.filter(item => item.value === defaultModelID)[0].label;
            return this.formData;
        },

        setJsonValue (data) {
            this.formData = {...DEFAULT_VALUE, ...data};
        }
    }
};
</script>
<style lang="less" scoped>
    .old-compare_form{
        padding: 15px 32px 0;
        height: 520px;
        width: 640px;
        .sfv-fieldlabel-left{
            padding-left: 0;
        }
        .form-box__content{
            background: #F5F5F5;
            border: 1px solid #E0E0E0;
            border-radius: 2px;
            padding-right: 10px;
            width: 427px;
            padding-top: 15px;
        }
        .form-box__list{
            border-top: 1px solid #dee3ed;
            display: flex;
            .form-box__title{
                margin: 15px 0 5px 0;
                font-size: 14px;
                color: #14161A;
                font-weight:bolder;
                display:flex;
                align-items:center;
                &.m-t0{
                    margin-top: 0;
                }
            }
            .form-box__items{
                &:first-child{
                    margin-right: 30px;
                }
            }
        }
        .form-select__box{
            display: flex;

        }
        .form-select__item{
            display: flex;
            flex-direction: column;
            margin-right: 8px;
            margin-bottom: 16px;
            .sfv-form-item{
                margin-bottom: 0;
            }
        }
        .form-flex{
            display: flex;
            .already-leng{
                width: 140px !important;
            }
            .already-tip{
                margin-left: -15px;
                margin-top: 5px;
            }


        }

    }
</style>
